<template>
    <div class="content">
        <!--顶部搜索按钮区域-->
        <search-top-bar />
        <div class="top-img-box">
            <image
                mode="aspectFill"
                src="/pages/subPackageA/static/shou-star.jpg"
                class="top-img img"
            ></image>
        </div>
        <div class="btn-com-box">
            <div
                class="zhuan-ye-img"
                :style="{ color: activeIndex === 0 ? '#edcd95' : '#fff' }"
                @click="activeIndex = 0"
            >
                <div class="c-text">专业会员注册</div>
                <div class="spe">Professional Membership Registration</div>
            </div>
      <!--      <div
                class="jia-bing-img"
                :style="{ color: activeIndex === 1 ? '#edcd95' : '#fff' }"
                @click="activeIndex = 1"
            >
                <div class="c-text">嘉宾会员注册</div>
                <div class="spe">Guest Member Registration</div>
            </div> -->
            <!-- <image mode="aspectFill" src="/pages/subPackageA/static/zhuan-login.png" class="zhuan-ye-img img"></image>
		<image mode="aspectFill" src="/pages/subPackageA/static/jia-login.png" class="jia-bing-img img"></image>  -->
        </div>
        <div class="form-box">
            <uv-form
                labelPosition="left"
                :labelStyle="{ 'font-size': '32rpx', color: '#000' }"
                :model="formModel"
                :rules="rules"
                ref="form"
            >
                <uv-form-item label="姓  名" prop="name" labelWidth="120rpx">
                    <uv-input v-model="formModel.name"> </uv-input>
                </uv-form-item>
                <uv-form-item
                    label="专  业"
                    prop="major"
                    labelWidth="120rpx"
                >
                    <uv-input v-model="formModel.major"> </uv-input>
                </uv-form-item>
                <uv-form-item label="城  市" prop="city" labelWidth="120rpx">
                    <picker
                        @change="bindPickerChange"
                        mode="region"
                        :value="selectAreaVal"
                    >
                        <view
                            class="uni-input"
                            style="text-align: right; padding-right: 20rpx"
                            >{{ formModel.city || "请选择城市" }}</view
                        >
                    </picker>
                    <template v-slot:right>
                        <uv-icon name="arrow-right"></uv-icon>
                    </template>
                </uv-form-item>
                <uv-form-item
                    label="电  话"
                    prop="phone"
                    labelWidth="120rpx"
                >
                    <uv-input v-model="formModel.phone"> </uv-input>
                </uv-form-item>
                <uv-form-item
                    label="Email"
                    prop="email"
                    labelWidth="120rpx"
                    :customStyle="{ 'letter-spacing': '2rpx' }"
                >
                    <uv-input v-model="formModel.email"> </uv-input>
                </uv-form-item>
            </uv-form>
        </div>
        <div class="btn-box">
            <image
                @click="submitForm"
                class="submit-bg img"
                src="/static/images/submit.png"
                mode="aspectFit"
            ></image>
        </div>
    </div>
</template>
<script setup>
import useShare from "@/utils/composables/useShare";
import searchTopBar from "../components/searchTopBarHaveBack.vue";
import {registMemberApi} from "@/api/index";
import { useUserStore } from "@/stores";
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const {onShareAppMessage,onShareTimeline}=useShare({
	path:'/pages/index/index'
}); 
const activeIndex = ref(0);
const formModel = reactive({
    name: "",
    major: "",
    city: "",
    phone: "",
    email: "",
});
const rules = {
    // name:{
    // 	type: 'string',
    // 	required: true,
    // 	message: '请填写姓名',
    // 	trigger: ['blur', 'change']
    // },
    // major:{
    // 	type: 'string',
    // 	required: true,
    // 	message: '请填写专业',
    // 	trigger: ['blur', 'change']
    // },
    // city:{
    // 	type: 'string',
    // 	max: 1,
    // 	required: true,
    // 	message: '请选择城市',
    // 	trigger: ['blur', 'change']
    // },
    // phone:{
    // 	required:true,
    // 	pattern:/^1[3-9]\d{9}$/,
    // },
    // email:{
    // 	required:true,
    // 	pattern:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    // }
};
const selectAreaVal = ref([]);
const bindPickerChange = (e) => {
    console.log(
        "picker发送选择改变，携带值为",
        e.detail.value,
        selectAreaVal.value
    );
    formModel.city = e.detail.value?.join("/");
};
const submitForm = () => {
	// formModel
	const { name,major,city,phone,email}=formModel;
	if(!name.trim()){
		uni.showToast({
			title:'姓名不能为空',
			icon:'none'
		})
		return;
	}
	if(!major.trim()){
		uni.showToast({
			title:'专业不能为空',
			icon:'none'
		})
		return;
	}
	if(!city){
		uni.showToast({
			title:'请选择城市',
			icon:'none'
		})
		return;
	}
	if(!phone||!/^1[3-9]\d{9}$/.test(phone.trim())){
		uni.showToast({
			title:'手机号有误',
			icon:'none'
		})
		return;
	}
	if(!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)){
		uni.showToast({
			title:'邮箱有误',
			icon:'none'
		})
		return;
	}
	registMemberApi({
	  "city": city.trim(),
	  "email":email.trim(),
	  "major": major.trim(),
	  "mtype": activeIndex===1?"GUEST":"PROFESSIONAL",
	  "name":name.trim(),
	  "phone": phone.trim()
	}).then(res=>{
		console.log(res,'---注册会员----res----')
		if(res.data){
			userStore.userInfo=Object.assign(userInfo.value,res.data||{});
			uni.showModal({
				title: '提示',
				content: '提交成功，请耐心等待工作人员审核，审核期间请勿重复提交审核！',
				showCancel:false,
				success: function (res) {
					 uni.navigateBack({
					 	delta:1
					 })
				}
			});
		}else{
			uni.showToast({
				title:'注册失败',
				icon:'none'
			})
		}
		 
	})
};
</script>

<style lang="scss" scoped>
.top-img-box {
    .top-img {
        width: 100%;
        height: 525rpx;
    }
}
.btn-box {
    margin-top: 30rpx;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20rpx;
    .submit-bg {
        width: 339rpx;
        height: 92rpx;
    }
}
.form-box {
    padding: 0 95rpx 20rpx 95rpx;
    box-sizing: border-box;
}
.btn-com-box {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    padding: 100rpx 0rpx 50rpx 0rpx;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    //line-height: 90rpx;
    .zhuan-ye-img {
        // width: 423rpx;
        min-width: 300rpx;
        padding: 20rpx 0rpx;
        box-sizing: border-box;
        margin-bottom: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // height: 90rpx;
        background: #000;
    }
    .jia-bing-img {
        min-width: 300rpx;
        box-sizing: border-box;
        padding: 20rpx 0rpx;
        margin-bottom: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // width: 250rpx;
        // height: 90rpx;
        background: #000;
    }
    .c-text {
        font-size: 38rpx;
        letter-spacing: 4rpx;
		margin-bottom: 6rpx;
    }
    .spe {
        font-size: 14rpx;
        color: #fff;
		font-style: italic;
    }
}
</style>
